<template>
  <div id="navigation-bar-root">
    <router-link to="/">
      <img class="logo-img" src="../assets/img/ico/newLOGO.png" ref="logo" />
    </router-link>
    <div id="nav">
      <div class="nab-div" v-for="item in nabs" :key="item.text">
        <router-link :to="item.router">{{ item.text }}</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { Options, Vue } from "vue-class-component";

@Options({
  props: {},
})
export default class NavigationBar extends Vue {
  nabs = [
    { text: "Home", router: "/" },
    { text: "Program", router: "/" },
    { text: "Video", router: "/" },
    { text: "Photo", router: "/" },
    { text: "Music", router: "/" },
    { text: "Doc", router: "/doc" },
    { text: "About", router: "/about" },
  ];
}
</script>

<style lang="scss">
#navigation-bar-root {
  background-color: rgba($color: #000000, $alpha: 0.8);
//   position: fixed;
//   top: 0;
  width: 100%;
  height: 50px;
  .logo-img {
    float: left;
    margin-left: 20px;
    width: 70px;
    height: 70px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  #nav {
    display: flex;
    justify-content: flex-end;
    margin-right: 100px;
    font-family: harmony-sans-black;
    .nab-div {
        margin: 15px;
      a {
        font-weight: bold;
        //   color: #0044cb;
        color: #2c3e50;
        text-decoration: none;

        &.router-link-exact-active {
          color: white;
        }
      }
    }
  }
}
</style>